<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

    <head>
        <meta charset="UTF-8">
        <title>菜单权限</title>
        <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}"/>
        <link rel="stylesheet" th:href="@{/css/common.css}">
        <link rel="stylesheet" th:href="@{/css/animate.min.css}">
        <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
    </head>

    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        div {
            -moz-box-sizing: border-box; /*Firefox3.5+*/
            -webkit-box-sizing: border-box; /*Safari3.2+*/
            -o-box-sizing: border-box; /*Opera9.6*/
            -ms-box-sizing: border-box; /*IE8*/
            box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
        }

        .layui-table-view .layui-table {
            width: 100%
        }
    </style>

    <body class="animated fadeIn">

        <div class="page-loading">
            <div class="rubik-loader"></div>
        </div>

        <div style="height: 100%">
            <div style="height: 100%">
                <div style="padding: 20px; background-color: #F2F2F2;height:100%;">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-header">菜单树</div>
                                <div class="layui-card-body" id="toolbarDiv">
                                    <ul id="menuTree" class="dtree" data-id="0"></ul>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md9">
                            <div class="layui-card">
                                <div class="layui-card-header" id="card-header">菜单列表</div>
                                <div class="layui-card-body">
                                    <table class="layui-hide" id="menu-table"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/html" id="toolbar">
            <shiro:hasPermission name="menu:add">
                <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">
                    <i class="zadmin-icon zadmin-icon-xinzeng zadmin-oper-area" title="新增">新增</i>
                </button>
            </shiro:hasPermission>
        </script>

        <script type="text/html" id="column-toolbar">

            <shiro:hasPermission name="menu:update">
                <a lay-event="edit">
                    <i class="zadmin-icon zadmin-icon-edit-square zadmin-oper-area zadmin-blue" title="编辑"></i>
                </a>
            </shiro:hasPermission>

            <shiro:hasPermission name="menu:delete">
                <a lay-event="del">
                    <i class="zadmin-icon zadmin-icon-delete zadmin-oper-area zadmin-red" title="删除"></i>
                </a>
            </shiro:hasPermission>

            <shiro:lacksPermission name="menu:update, menu:delete">
                <i class="zadmin-icon zadmin-icon-wuquanxian zadmin-oper-area zadmin-red" title="无权限">无权限</i>
            </shiro:lacksPermission>

        </script>

        <script type="text/html" id="column-toolbar-sort">
            <i class="zadmin-icon zadmin-icon-shangyimian zadmin-oper-area zadmin-blue" lay-event="up" title="上移"></i>

            <i class="zadmin-icon zadmin-icon-xiayimian zadmin-oper-area zadmin-blue" lay-event="down" title="下移"></i>

            <i class="zadmin-icon zadmin-icon-zhidingmian zadmin-oper-area zadmin-blue" lay-event="top" title="置顶"></i>

            <i class="zadmin-icon zadmin-icon-zhidimian zadmin-oper-area zadmin-blue" lay-event="bottom" title="置底"></i>
        </script>

        <script th:src="@{/lib/jquery/jquery.min.js}"></script>
        <script th:src="@{/lib/layui/layui.js}"></script>
        <script th:src="@{/js/common.js}"></script>

        <script>
            var parentMenuId = 0;
            // 获取有没有删除, 更新, 和新增的权限.
            var hasMenuDelete = false;
            var hasMenuUpdate = false;
            var hasMenuAdd = false;

            $.get('/security/hasPermission/menu:update', function (data) {
                hasMenuUpdate = data.data;
            });
            $.get('/security/hasPermission/menu:delete', function (data) {
                hasMenuDelete = data.data;
            });
            $.get('/security/hasPermission/menu:add', function (data) {
                hasMenuAdd = data.data;
            });

            layui.config({
                base: '/lib/layui/extend/'
            }).use(['jquery', 'dtree', 'layer', 'table', 'element'], function () {
                var dtree = layui.dtree;
                var layer = layui.layer;
                var table = layui.table;

                var DTree = dtree.render({
                    elem: "#menuTree",
                    url: "/menu/tree/root",
                    dataStyle: "layuiStyle",
                    initLevel: 5,   // 初始打开节点级别
                    method: "GET",
                    dot: false,     // 圆点是否显示
                    toolbar: true,  // 右键工具栏
                    menubar: true,  // 树上方工具栏, 展开、收缩、刷新、搜索等
                    toolbarShow: [],
                    toolbarScroll: "#toolbarDiv",
                    toolbarExt: [
                        {
                            toolbarId: "add",
                            icon: "dtree-icon-roundadd",
                            title: "添加子菜单",
                            handler: function (node, $div) {
                                add(node.nodeId);
                            }
                        },
                        {
                            toolbarId: "edit",
                            icon: "dtree-icon-bianji",
                            title: "编辑",
                            handler: function (node, $div) {
                                edit(node.nodeId);
                            }
                        },
                        {
                            toolbarId: "remove",
                            icon: "dtree-icon-roundclose",
                            title: "删除",
                            handler: function (node, $div) {
                                del(node.nodeId);
                            }
                        }
                    ],
                    response: {
                        statusName: "status",
                        statusCode: 0,
                        message: "message",
                        treeId: "menuId",
                        parentId: "parentId",
                        title: "menuName"
                    },
                    toolbarFun: {
                        loadToolbarBefore: function (buttons, param, $div) {
                            if (param.level === "1") { // 如果是顶级节点, 则取消编辑和删除功能.
                                buttons.edit = "";
                                buttons.remove = "";
                            }
                            if (!hasMenuAdd) {
                                buttons.add = "";
                            }
                            if (!hasMenuDelete) {
                                buttons.remove = "";
                            }
                            if (!hasMenuUpdate) {
                                buttons.edit = "";
                            }
                            return buttons;
                        }
                    }
                });

                table.render({
                    elem: '#menu-table'
                    , url: '/menu/list'
                    , where: {
                        parentId: 0
                    }
                    , cellMinWidth: 80
                    , toolbar: '#toolbar'
                    , parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": res.status, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "data": res.data //解析数据列表
                        };
                    }
                    , cols: [
                        [
                            {type: 'numbers', title: 'ID', width: "5%"}
                            , {field: 'menuId', title: 'ID', hide: true}
                            , {field: 'menuName', title: '页面名称', width: "15%"}
                            , {field: 'url', title: 'URL', width: "20%"}
                            , {field: 'perms', title: '权限标识符', width: "15%"}
                            , {
                            title: '排序',
                            fixed: 'right',
                            width: "25%",
                            align: 'center',
                            toolbar: '#column-toolbar-sort'
                        }
                            , {title: '操作', align: 'center', toolbar: '#column-toolbar'}
                        ]
                    ]
                });

                dtree.on("node('menuTree')", function (obj) {
                    table.reload('menu-table', {
                        where: {
                            parentId: obj.param.nodeId
                        }
                    });
                    parentMenuId = obj.param.nodeId;
                    $("#card-header").html("[" + obj.param.context + "]的子菜单");
                });

                table.on('toolbar', function (obj) {
                    var event = obj.event;
                    if (event === 'add') {
                        add(parentMenuId);
                    }
                });

                table.on('tool', function (obj) {
                    var data = obj.data;
                    console.log("===============");
                    console.log(obj);
                    console.log(data);
                    console.log("===============");
                    var swapId;
                    var currentId;
                    if (obj.event === 'edit') {
                        edit(data.menuId);
                    } else if (obj.event === 'del') {
                        del(data.menuId);
                    } else if (obj.event === "up") {
                        swapId = $(obj.tr).prev().find("td[data-field='menuId'] div").html();
                        currentId = data.menuId;
                        if (typeof swapId == 'undefined') {
                            layer.msg("已是第一层");
                            return;
                        }
                        swapSort(currentId, swapId);
                    } else if (obj.event === "down") {
                        swapId = $(obj.tr).next().find("td[data-field='menuId'] div").html();
                        currentId = data.menuId;
                        if (typeof swapId == 'undefined') {
                            layer.msg("已是最后一层");
                            return;
                        }
                        swapSort(currentId, swapId);
                    } else if (obj.event === "top") {
                        swapId = $("tr[data-index='0']").first().parent().children().first().find("td[data-field='menuId'] div").html();
                        currentId = data.menuId;
                        swapSort(currentId, swapId);
                    } else if (obj.event === "bottom") {
                        swapId = $("tr[data-index='0']").first().parent().children().last().find("td[data-field='menuId'] div").html();
                        currentId = data.menuId;
                        swapSort(currentId, swapId);
                    }
                });

                function swapSort(currentId, swapId) {
                    $.post('/menu/swap', {currentId: currentId, swapId: swapId}, function (data) {
                        layer.msg("交换成功");
                        handlerResult(data, function () {
                            refresh();
                        });
                    });
                }

                function del(id) {
                    layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除！", {icon: 3, title: '提示'},
                        function (index) {
                            $.post('/menu/' + id, {_method: "DELETE"}, function (data) {
                                layer.close(index);
                                handlerResult(data, function () {
                                    layer.msg("删除成功", {icon: 6});
                                    refresh();
                                });
                            });
                        }, function (index) {
                            layer.close(index);
                        }
                    );
                }

                function refresh() {
                    table.reload("menu-table");
                    DTree.menubarMethod().refreshTree();
                }

                function add(parentId) {
                    layer.open({
                        content: "/menu",
                        title: "添加子菜单",
                        area: ['40%', '85%'],
                        type: 2,
                        maxmin: true,
                        shadeClose: true,
                        end: function () {
                            refresh();
                        }
                    });
                }

                function edit(id) {
                    layer.open({
                        content: '/menu/' + id,
                        title: "编辑",
                        area: ['40%', '85%'],
                        type: 2,
                        maxmin: true,
                        shadeClose: true,
                        end: function () {
                            refresh();
                        }
                    });
                }
            });
        </script>
    </body>
</html>